<template>
  <div class="user-login">
    <div class="user-login-bg" :style="{'background-image':`url(${backgroundImage})`}"></div>
    <div class="content-wrapper">
      <h2 class="slogan">
        欢迎进入 <br/> feige的后台管理系统
      </h2>
      <div class="form-container">
        <h4 class="form-title">登录</h4>
        <el-form ref="form" :model="loginUser" :rules="loginRules" label-width="0">
          <div class="form-items">
            <el-row class="form-item">
              <el-col>
                <el-form-item prop="username">
                  <div class="form-line">
                    <i class="el-icon-user-solid input-icon"></i>
                    <el-input placeholder="学号/邮箱/手机号" v-model="loginUser.username"></el-input>
                  </div>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row class="form-item">
              <el-col>
                <el-form-item prop="password">
                  <div class="form-line">
                    <i class="el-icon-lock input-icon"></i>
                    <el-input type="password" placeholder="密码" v-model="loginUser.password"></el-input>
                  </div>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row class="form-item">
              <el-col>
                <el-form-item prop="code">
                  <div class="form-line">
                    <i class="el-icon-edit-outline input-icon"></i>
                    <el-input type="text" placeholder="验证码" v-model="loginUser.code" style="width: 150px"></el-input>
                    <img :src="codeUrl" @click="getCode" alt="" width="100px" height="45px" style="margin-bottom: 5px;">
                  </div>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row class=form-item>
              <el-col>
                <el-form-item>
                  <el-checkbox class="checkbox" v-model="loginUser.rememberMe">记住账号</el-checkbox>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row class="form-item">
              <el-button :loading="loading" type="primary" class="submit-btn" size="small"
                         @click.native.prevent="handlerLogin">
                <span v-if="!loading">登 录</span>
                <span v-else>登 录 中...</span>
              </el-button>
            </el-row>
          </div>
          <el-row class="tips">
            <a href="/" class="link">
              立即注册
            </a>
            <span class="line">|</span>
            <a href="/" class="link">
              忘记密码
            </a>
          </el-row>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
  //import BasicContainer from '@vue-materials/basic-container';
  import {getCodeImg} from "@/api/login";
  import backgroundImage from '@/assets/image/background.png'
  import Cookies from "js-cookie";
  // const backgroundImage =
  //   'https://img.alicdn.com/tfs/TB1zsNhXTtYBeNjy1XdXXXXyVXa-2252-1500.png';
  export default {
    //components: { BasicContainer },
    name: 'login',
    data() {
      const validateUsername = (rule, value, callback) => {
        if (value.length <= 0) {
          callback(new Error('用户名不能为空！'))
        } else {
          callback()
        }
      };
      const validatePassword = (rule, value, callback) => {
        if (value.length < 6 || value.length > 16) {
          callback(new Error('密码长度为6~16位！'))
        } else {
          callback()
        }
      };
      const validateCode = (rule, value, callback) => {
        if (value.length > 4) {
          callback(new Error('验证码长度不超过4位！'))
        } else {
          callback()
        }
      };
      return {
        backgroundImage: backgroundImage,
        loginUser: {
          username: '',
          password: '',
          code: '',
          uuid: '',
          rememberMe: false
        },
        loginRules: {
          username: [{required: true, trigger: 'blur', validator: validateUsername}],
          password: [{required: true, trigger: 'blur', validator: validatePassword}],
          code: [{required: true, trigger: 'blur', validator: validateCode}]
        },
        codeUrl: '',
        loading: false,
        redirect: undefined
      };
    },
    created() {
      this.getCode();
      this.getCookie();
    },
    methods: {
      //生成验证码
      getCode() {
        getCodeImg().then(res => {
          //console.log(res);
          this.codeUrl = "data:image/gif;base64," + res.img;
          this.loginUser.uuid = res.uuid;
        }).catch(err => {
          console.log(err);
        })
      },
      getCookie() {
        const username = Cookies.get("username");
        const password = Cookies.get("password");
        const rememberMe = Cookies.get('rememberMe')
        this.loginUser = {
          username: username === undefined ? this.loginUser.username : username,
          password: password === undefined ? this.loginUser.password : decrypt(password),
          rememberMe: rememberMe === undefined ? false : Boolean(rememberMe)
        };
      },
      handlerLogin() {
        this.$refs.form.validate((valid) => {
          if (valid) {
            this.loading = true;
            if (this.loginUser.rememberMe) {
              Cookies.set("username", this.loginUser.username, {expires: 30});
              Cookies.set("password", encrypt(this.loginUser.password), {expires: 30});
              Cookies.set('rememberMe', this.loginUser.rememberMe, {expires: 30});
            } else {
              Cookies.remove("username");
              Cookies.remove("password");
              Cookies.remove('rememberMe');
            }
            this.$store.dispatch('Login', this.loginUser).then(() => {
              this.$router.push({path: this.redirect || '/'});
              this.loading = false
            }).catch(() => {
              this.loading = false;
              this.getCode();
            })
          } else {
            console.log('error submit!!');
            return false
          }
        });
      },
    },
    watch: {
      $route: {
        handler: function (route) {
          this.redirect = route.query && route.query.redirect
        },
        immediate: true
      }
    },
  };
</script>

<style lang="scss">
  @import "src/assets/styles/login";

  .el-input__inner {
    border: 1px solid white !important;
  }
</style>
